<template>
	<view>
		<view class="bg-[#fff] my-[20rpx] py-[20rpx] rounded-[20rpx]">
			<view class="p-[20rpx] flex items-center">
				<view class="" @click="showSteps = true">
					订单信息
				</view>
				<view class="">
					<u-icon name="arrow-right" top='0' color="#222222"></u-icon>
				</view>
			</view>
			<u-cell-group :border="false">

				<u-cell v-if="data.deliveryType !=3" title="期望时间" :border="false"
					:titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<up-text text="尽快送达" align="right" color="#000000"
							size="14"></up-text>
					</template>
				</u-cell>
				<u-cell v-if="data.deliveryType !=3" title="配送地址" :border="false"
					:titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<view class="w-[300rpx] text-right">
							<up-text
								:text="data.orderContent?.address "
								align="right" color="#000000" size="14" word-wrap="anywhere"></up-text>
						</view>
					
						<view class="w-[300rpx]">
							<up-text
								:text=" data.orderContent?.userName+data.orderContent?.userPhone "
								align="right" color="#000000" size="14" word-wrap="anywhere"></up-text>

						</view>
					</template>
				</u-cell>
				<u-cell title="配送服务" :border="false" :titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>

						<up-text v-if="data.deliveryType ==1" text="点老板配送" align="right" color="#000000"
							size="14"></up-text>
						<up-text v-if="data.deliveryType ==2" text="商家自配送" align="right" color="#000000"
							size="14"></up-text>
						<up-text v-if="data.deliveryType ==3" text="到店自取" align="right" color="#000000"
							size="14"></up-text>
					</template>
				</u-cell>
				<view class="px-[20rpx] py-[10rpx]">
					<u-line color="#efefef"></u-line>
				</view>

				<u-cell title="订单号码" :border="false" :titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<up-text :text="data.orderId" align="right" color="#000000" size="14"></up-text>
					</template>
				</u-cell>

				<u-cell title="下单时间" :border="false" :titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<up-text :text="data.createdAt" align="right" color="#000000" size="14"></up-text>
					</template>
				</u-cell>
				<u-cell title="支付方式" :border="false" :titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<up-text v-if="data.payType ==2" text="余额支付" align="right" color="#000000" size="14"></up-text>
						<up-text v-if="data.payType ==1" text="微信支付" align="right" color="#000000" size="14"></up-text>
					</template>
				</u-cell>

				<u-cell title="餐具数量" :border="false" :titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<up-text lines="1" :text="data.orderContent?.dishNumber" align="right" color="#000000"
							size="14"></up-text>
					</template>
				</u-cell>
				<u-cell title="客户备注" :border="false" :titleStyle="{color:' #787878',fontSize:'28rpx'}">
					<template #value>
						<view class="w-[400rpx]">
							<up-text :text="data.orderContent?.remarks" align="right" color="#000000" size="14"
								lines="1"></up-text>

						</view>

					</template>
				</u-cell>

			</u-cell-group>
		</view>

		<!-- 订单状态步骤条 -->
		<u-popup round="10" :show="showSteps" @close="showSteps = false" @open="open" :closeOnClickOverlay="true">
			<view class="p-[20rpx]">
				<view class="flex items-center justify-between">
					<view class="text-[34rpx] text-[#000000] ">
						订单跟踪
					</view>
					<view class="" @click="showSteps = false">
						<u-icon name="close" color="#000000"></u-icon>
					</view>
				</view>
				<view class="mt-[20rpx] h-[636rpx] overflow-y-scroll">
					<u-steps inactiveColor="#eaeaea" activeColor="#ffa565" :dot="true" :current="0" direction="column"
						style="">
						<u-steps-item v-for="(item,index) in orderlOG" :key="index">
							<template #desc>
								<view class="flex justify-between " style="margin-bottom: 30rpx;">
									<view class="text-[26rpx] font-normal text-[#202020] pb-[20rpx]">
										{{item.stateName}}
									</view>
									<view class=" text-right text-[26rpx] font-normal text-[#313131] "
										style="float: right;">
										{{item.createdAt}}
									</view>
								</view>
							</template>
						</u-steps-item>
					</u-steps>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		deliverRecords
	} from '@/api/order.js'
	import {
		ref,

	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const showSteps = ref(false)
	const porps = defineProps({
		data: {

		}
	})
	// console.log("阿S浅色的确定萨asssa啊", porps);

	onShow(() => {
		setTimeout(() => {
			info()
		}, 2000)
	})
	const orderlOG = ref([])
	const info = () => {
		deliverRecords({
			orderId: porps.data.orderId
		}).then(res => {
			orderlOG.value = res.result
			 console.log("阿萨啊", res);
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-cell__body.data-v-3fd6feca {
		padding: 10rpx 20rpx;
		align-items: start;
	}

	::v-deep .u-cell-group__title__text.data-v-014d39dc {
		font-size: 32rpx;
		line-height: 16px;
		color: #000000;
	}

	::v-deep .u-cell-group__title.data-v-014d39dc {
		padding: 20rpx 20rpx 10rpx 20rpx;
		font-weight: 500;
	}

	::v-deep .u-text.data-v-0a574502 {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		flex: 1;
		width: 100%;
		padding-top: 2px;
	}
</style>